<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE 表达式</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>基本运算符：
				<li>加法：{{ 3+3 }}</li>
				<li>拼接：{{ "3"+"3" }}、{{ 3+"3" }}、{{ '3'+"3" }}</li>
				<li>减法：{{ "3"-"3" }}、{{ 3-2 }}</li>
				<li>乘法：{{ "2"*"3" }}、{{ 3*2 }}</li>
				<li>除法：{{ 3/3 }}、{{ 3/"3" }}、{{ 3/"2" }}、{{ 10/3 }}</li>
			</ul>
			<ul>三目运算：
				<li>{{ age>18 ? "老男人":"小鲜肉" }}</li>
			</ul>
			<ul>字符串：
				<li>信息内容：{{ message }}</li>
				<li>信息长度：{{ message.length }}</li>
				<li>截串：{{ message.substring(1,3) }}</li>
			</ul>
			<ul>数组：
				<li>数组：{{ hobbys}}</li>
				<li>长度：{{ hobbys.length}}</li>
				<li>元素：{{ hobbys[1] }}</li>
			</ul>
			<ul>对象：
				<li>{{ girlFriend.name}}</li>
				<li>{{ girlFriend.age}}</li>
				<li>{{ girlFriend.msg}}</li>
			</ul>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: {
				name: "tony",
				age: 15,
				message: "这是一个帅小伙",
				hobbys: ["文学","历史","武术"],
				girlFriend: {
					name: "如花",
					age: 16,
					msg: "这是一个如花少女"
				}
			}
		});
	</script>
</html>
